<template>
  <div>
    <div>从store中获取的数据 {{ $store.state.count }}</div>
    <div>从store中computed的数据 {{ count }}</div>
    <div>从store中获取的数据 {{ $store.state.age }}</div>
    <div>从store中获取的getters的数据 {{ $store.getters.double }}</div>
    <div>
      <button @click="fn1">增加count</button>
      <button @click="$store.dispatch('incrment', 5)">
        调用action增加count
      </button>
    </div>
    <hr />
    <div>usermodel里面的数据</div>
    <div>user的name ： {{ $store.state.user.username }}</div>
    <div>user的age ： {{ $store.state.user.age }}</div>
    <div>
      <button @click="$store.commit('user/growth')">增加user模块里面age</button>
    </div>
    <hr />
    <div>通过辅助函数操作vuex中的数据</div>
    <div>主仓库的数据 count:{{ count }} , age : {{ age }}</div>
    <div>
      user模块里的数据 username:{{ username }} , userAge : {{ userAge }}
    </div>
    <div>
      <button @click="add(1.5)">调用map出来的add方法</button>
      <button @click="growth">调用map出来的growth方法</button>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";

export default {
  // 如果觉得在模板里面使用 $stre.state.xxx 太长，可以使用computed属性
  computed: {
    count() {
      return this.$store.state.count;
    },
    ...mapState(["count", "age"]),
    ...mapState({
      username: (state) => state.user.username,
      userAge: (state) => state.user.age,
    }),
  },
  methods: {
    fn1() {
      // 如果要调用 vuex里面的mutaions里面的方法，需要使用  $state.commmit('方法名',参数)
      this.$store.commit("add", 2);
    },
    ...mapMutations(["add"]),
    ...mapMutations({
      growth: "user/growth",
    }),
  },
};
</script>
